<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-09 14:20:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-09 14:31:34
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        
        <span>我是原班人马</span>
    </div>
    <script>
        /* 
            插入节点  

            //前面 createElement  createTextNode仅仅是创建
            // 不会再页面上显示  想显示 必须把创建好的放到
            // 已经存在的标签里边 

            // 就是把一个节点放到另外一个节点 当子节点用  


            // appendChild();
            // 父节点.appendChild(子节点)
            // 子节点放到父节点内部 并且是放到最后边 





            // insertBefore()
            //父节点.insertBefore(子节点,谁的前面)
            // 子节点放到父节点内部 并且是 一个本身存在的节点的前面 



        
        
        
        */

      //获取目标元素 
      var oldDiv = document.querySelector('div');
      var brotherSpan =  document.querySelector('span');

    //    var newDiv = document.createElement('div');
    //    newDiv.innerText = '我是新来的';

    //    oldDiv.appendChild(newDiv);
       var newDiv2 = document.createElement('div');
       newDiv2.innerText = '多多指教';

       
    oldDiv.insertBefore(newDiv2,brotherSpan);
    </script>
</body>
</html>